<template>
  <!-- 生产追溯报表 -->
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :expandObj="expandObj"
        :tableData="tableData"
        :tableColumn="tableColumn"
        :total="totalNum"
        rowKeyStr="rowId"
        requestName="getList"
        @rowView="viewHandle($event)"
      />
    </div>
    <TrDetail
      v-model="isShowDetailPopup"
      :leftList="detailList"
      statusModel="hidden"
      :detailData="detailData"
      :width="1227"
      :isNeedFooter="false"
    >
      <template #bomTable>
        <TrTable
          isPopup
          v-model="detailSearchParams"
          :tableData="detailTableData"
          :tableColumn="detailTableColumn"
          :isNeedPagination="false"
        />
      </template>
    </TrDetail>
  </div>
</template>

<script>
import { getList, getDetail } from "@/api/report/energyProdTraceability.js";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";
import TrTable from "@/components/Tr-table/Tr-table.vue";

export default {
  name: "EnergyProdTraceability",
  components: {
    TrTable,
    TrDetail,
  },
  data: () => ({
    totalNum: 0,
    isShowDetailPopup: false,
    tableData: [],
    searchParams: {
      current: 1,
      size: 10,
    },
    searchHideList: [
      {
        id: "packageCode",
        label: "包装标签",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "materialCode",
        label: "成品料号",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "workOrderCode",
        label: "生产工单",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "materialName",
        label: "成品名称",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "flowCardCode",
        label: "流程卡号",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "materialLabelCode",
        label: "物料标签",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "oriMaterialCode",
        label: "原料料号",
        type: "input",
        value: "",
        width: 33.3,
      },
      {
        id: "oriMaterialName",
        label: "原料名称",
        type: "input",
        value: "",
        width: 33.3,
      },
    ],
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        radio: 1,
        timePeriod: true,
      },
    ],
    tableColumn: [
      {
        columnType: "expand",
        width: 60,
      },
      {
        type: "text",
        label: "包装标签",
        value: "packageCode",
      },
      {
        type: "text",
        label: "包装时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "包装人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "合计包装",
        value: "totalMaterial",
      },
      {
        type: "text",
        label: "成品料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "成品名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "生产工单",
        value: "workOrderCode",
      },
      {
        type: "text",
        label: "流程卡号",
        value: "flowCardCode",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 80,
        showBtnList: [
          {
            label: "查看",
            option: "rowView",
          },
        ],
      },
    ],
    expandObj: {
      isNeedIndex: false,
      tableColumn: [
        {
          type: "text",
          label: "原料料号",
          value: "materialCode",
        },
        {
          type: "text",
          label: "原料名称",
          value: "materialName",
        },
        {
          type: "text",
          label: "供应商名称",
          value: "supplierName",
        },
        {
          type: "text",
          label: "供应商编码",
          value: "supplierCode",
        },
        {
          type: "text",
          label: "物料标签",
          value: "barcode",
        },
        {
          type: "text",
          label: "投料卷号",
          value: "volumeCode",
        },
        {
          type: "text",
          label: "原料数量",
          value: "newNum",
        },
        {
          type: "text",
          label: "原料重量",
          value: "newWeight",
        },
      ],
      rowKeyStr: "packageLabelId",
    },
    detailTableData: [],
    detailData: {},
    detailSearchParams: {},
    detailList: [
      {
        type: "text",
        id: 1,
        label: "基础信息",
        list: [
          {
            text: "包装标签",
            id: "packageCode",
            width: 33.33,
          },
          {
            text: "生产工单",
            id: "workOrderCode",
            width: 33.33,
          },
          {
            text: "成品料号",
            id: "materialCode",
            width: 33.33,
          },
          {
            text: "成品名称",
            id: "materialName",
            width: 33.3,
          },
          {
            text: "流程卡号",
            id: "flowCardCode",
            width: 33.3,
          },
          {
            text: "合计包装",
            id: "totalMaterial",
            width: 33.3,
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "生产明细",
        slotBottom: 32,
      },
    ],
    detailTableColumn: [
      {
        type: "text",
        label: "工序",
        value: "processName",
      },
      {
        type: "text",
        label: "机台号",
        value: "machineCode",
      },
      {
        type: "text",
        label: "上料数量",
        value: "newLoadingNum",
      },
      {
        type: "text",
        label: "上料重量",
        value: "newLoadingWeight",
      },
      {
        type: "text",
        label: "下料数量",
        value: "newUnloadingNum",
      },
      {
        type: "text",
        label: "下料重量",
        value: "newUnloadingWeight",
      },
      {
        type: "text",
        label: "上料时间",
        value: "loadingPutMaterialTime",
      },
      {
        type: "text",
        label: "下料时间",
        value: "unloadingPutMaterialTime",
      },
    ],
  }),
  methods: {
    async getList() {
      const { data: res } = await getList(this.searchParams);
      this.$validateData(res.data.records);
      this.tableData = res.data.records.map((item, index) => {
        return {
          ...item,
          rowId: index,
          expandChildren: item.putMaterialList.map((val) => {
            return {
              ...val,
              newNum: `${val.num}${val.numUnitCode}(${val.numUnitName})`,
              newWeight: `${val.weight}${val.weightUnitCode}(${val.weightUnitName})`,
            };
          }),
          totalMaterial: `${item.totalNum}${item.totalNumUnitCode}(${item.totalNumUnitName})/${item.totalWeight}${item.totalWeightUnitCode}(${item.totalWeightUnitName})`,
        };
      });
      this.totalNum = res.data.total;
    },
    async viewHandle(val) {
      this.detailData = val;
      await this.getDetail();
    },
    async getDetail() {
      const { data: res } = await getDetail(
        this.detailData.packageLabelFlowCardId
      );
      this.$validateData(res.data);
      console.log("ta====>", res);
      this.detailTableData = res.data.map((item) => {
        return {
          ...item,
          newLoadingNum: `${item.loadingNum}${item.loadingNumUnitCode}(${item.loadingNumUnitName})`,
          newLoadingWeight: `${item.loadingWeight}${item.loadingWeightUnitCode}(${item.loadingWeightUnitName})`,
          newUnloadingNum: `${item.unloadingNum}${item.unloadingNumUnitCode}(${item.unloadingNumUnitName})`,
          newUnloadingWeight: `${item.unloadingWeight}${item.unloadingWeightUnitCode}(${item.unloadingWeightUnitName})`,
        };
      });
      this.isShowDetailPopup = true;
    },
  },
};
</script>
